<template>
  <div class="comment-list">
    <div class="mycommon">

    </div>
    <div v-for="comment in comments" :key="comment.commentId">
      <div class="comment">
        <img :src="comment.avatarUrl" alt="头像" class="avatar" />
        <div class="comment-content">
          <div class="comment-header">
            <span class="nickname" @click="goToUser(comment.userId)">
              {{ comment.nickname }}
              <img v-if="comment.vipRights" :src="comment.vipRights" alt="VIP" class="vip-icon" />
            </span>
            <div class="actions">
              <span class="liked-count">{{ comment.likedCount>0?comment.likedCount:"" }}<i-bi-hand-thumbs-up /></span>
              <i-bi-chat-dots class="reply-icon" />
            </div>
          </div>
          <p class="content">{{ comment.content }}</p>
          <span class="time">{{ comment.timeStr }}</span>

          <!-- 如果有回复，展示回复内容 -->
          <div v-if="comment.beReplied.length > 0" class="replies">
            <div class="reply" v-for="reply in comment.beReplied" :key="reply.commentId">
              <span class="reply-nickname" @click="goToUser(reply.userId)">
                {{ reply.nickname }}:
              </span>
              <span class="reply-content">{{ reply.content }}</span>
            </div>
          </div>
        </div>
      </div>
      <el-divider />
    </div>
    <el-empty v-if="comments.length === 0" description="暂无评论" />
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
import { useRouter } from 'vue-router'; // 引入 vue-router
import { Common } from '@/assets/apis/MusicDataType';

// 接收父组件传递的评论数组
defineProps<{
  comments: Common[];
}>();

// 获取路由实例
const router = useRouter();

// 路由跳转函数
const goToUser = (userId: number) => {
  router.push({ name: 'UserProfile', params: { userId } }); // 假设路由名称为 UserProfile
};
</script>

<style scoped lang="scss">
.comment-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.comment {
  display: flex;
  padding: 12px;
  align-items: flex-start;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 12px; // 头像和内容之间的间距
}

.comment-content {
  flex-grow: 1; // 内容区域自适应宽度
  position: relative; // 为绝对定位的图标留出空间
}

.comment-header {
  display: flex;
  justify-content: space-between; // 将昵称和时间分开
  align-items: center; // 垂直居中
  margin-bottom: 8px; // 昵称和时间之间的间距
}

.nickname, .reply-nickname {
  font-weight: bold;
  display: flex;
  align-items: center; // 垂直居中
  color: var(--el-color-primary-light-3); // 字体颜色改为蓝色
  cursor: pointer; // 鼠标悬浮时显示为指针
}

.vip-icon {
  width: 50px; // 调整 VIP 图标的大小
  margin-left: 4px; // VIP 图标与昵称之间的间距
}

.actions {
  display: flex;
  align-items: center;
}

.liked-count {
  margin-right: 6px;
  cursor: pointer;
}

.like-icon, .reply-icon {
  cursor: pointer;
  margin-left: 8px;
}

.time {
  font-size: 12px;
  color: #888;
  margin-top: 4px; // 评论内容与时间之间的间距
}

.content {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 4px; // 评论内容与时间之间的间距
}

.replies {
  margin-top: 8px; // 回复内容的顶部间距
  padding-left: 20px; // 回复内容的左侧缩进
  border-left: 2px solid #f0f0f0; // 左侧边框
}

.reply {
  font-size: 12px; // 回复内容字体大小
}

.reply-nickname {
  font-weight: bold; // 回复人昵称加粗
  color: var(--el-color-primary-light-3); // 回复昵称颜色
  cursor: pointer; // 鼠标悬浮时显示为指针
}

:deep(.el-divider--horizontal) {
  margin: 0;
}
</style>
